import React, { createContext, useContext, useState } from 'react'

// 主题配置
const themes = {
  light: {
    name: '浅色主题',
    colors: {
      primary: '#1890ff',
      background: '#ffffff',
      surface: '#f5f5f5',
      text: '#262626',
      textSecondary: '#8c8c8c',
      border: '#d9d9d9'
    }
  },
  dark: {
    name: '深色主题',
    colors: {
      primary: '#177ddc',
      background: '#141414',
      surface: '#1f1f1f',
      text: '#ffffff',
      textSecondary: '#a6a6a6',
      border: '#434343'
    }
  }
}

// 创建 Context
const ThemeContext = createContext()

// 自定义 Hook
export const useTheme = () => {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider')
  }
  return context
}

// ThemeProvider 组件
export const ThemeProvider = ({ children }) => {
  const [currentTheme, setCurrentTheme] = useState('light')
  
  const toggleTheme = () => {
    setCurrentTheme(prev => prev === 'light' ? 'dark' : 'light')
  }
  
  const theme = themes[currentTheme]
  
  const value = {
    theme,
    currentTheme,
    toggleTheme
  }
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  )
}

export default ThemeContext
